<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="example"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
  /*
  需求: 自定义包含表单的组件
    1. 界面如下所示
    2. 输入用户名密码后, 点击登陆提示输入信息
    3. 不提交表单
  */
  class Login extends React.Component{
    //初始化状态
    state = {
      password:''
    }
    /*
    1.用户名是当表单提交时，获取到的
    2.密码是当用户输入密码时，用户每输入一位密码，会自动维护到状态中，当点击提交表单的时候
      从状态中获取之前收集好的密码，弹窗显示
    */
    submitHandel = (event)=>{
      //阻止默认事件
      event.preventDefault()
      let {username}=this.refs
      let {password}= this.state
      //弹窗提示用户的输入
      alert(`准备提交的用户名是：${username.value},密码是${password}`)
    }
    changeHandel = (event)=> {
      this.setState({password:event.target.value})
    }

    render() {
      return (
       <form action="https://www.baidu.com" onSubmit={this.submitHandel}>
        用户名：<input type="text" ref ="username"/>
        密码： <input type="password" onChange={this.changeHandel}/> 
        <button>提交</button>
        </form>
      )
    }
  }

  ReactDOM.render(<Login/>,document.getElementById('example'))
  
  
  
  
  
  
  </script>
</body>
</html>